<!--
 * @Author: cl
 * @Description: 
 * @Date: 2022-06-10 17:19:41
 * @LastEditTime: 2023-06-02 09:03:20
 * @FilePath: \jsnode\css\animation.html
-->
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: example2;
  animation-duration: 8s;
  animation-delay: 2s;
  animation-iteration-count:1;
  animation-direction:alternate  ;
  animation-timing-function:ease-out;
  animation-fill-mode: backwards ;
  /* animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。 */
  /* 负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样： */
  /* animation-iteration-count 属性指定动画应运行的次数。 infinite  循环 */
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}


@keyframes example2 {
  0% {background-color: red; transform: translateY(0px);}
  20% {background-color: blue;transform: translateY(50px);}
  50% {background-color: green;transform: translateY(100px);}
  90% {background-color: yellow;transform: translateY(80px);}
  100% {background-color: gray;transform: translateY(20px);}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>

<div></div>

<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>

</body>
</html>
